<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unicorn Admin</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/back/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/back/css/bootstrap-responsive.min.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/back/css/uniform.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/back/css/select2.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/back/css/unicorn.main.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/back/css/unicorn.grey.css"
	class="skin-color" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>


	<div id="header">
		<h1>
			<a href="./dashboard.html">Unicorn Admin</a>
		</h1>
	</div>

	<div id="user-nav" class="navbar navbar-inverse">
		<ul class="nav btn-group">
			<li class="btn btn-inverse"><a title="" href="#"><i
					class="icon icon-user"></i> <span class="text">欢迎进入！管理员： ${sessionScope.admin.adminName}</span></a></li>
			
			<li class="btn btn-inverse"><a title="" href="login.jsp"><i
					class="icon icon-share-alt"></i> <span class="text">退出</span></a></li>
		</ul>
	</div>

	<div id="sidebar">
		<a href="#" class="visible-phone"><i class="icon icon-home"></i>
			Dashboard</a>
		<ul>
			<li><a href="index.jsp"><i class="icon icon-th-list"></i>
					<span>首页</span> </a>
			</li>
			<li><a href="userManage.jsp"><i class="icon icon-th-list"></i> <span>用户管理</span></a></li>
			
			<li class="submenu">
					<a href="#"><i class="icon icon-th-list"></i> <span>景点管理</span> <span class="label">2</span></a>
					<ul>
						<li><a href="insertScenic.jsp">新增景点</a></li>
						<li><a href="findAllScenic.jsp">维护景点信息</a></li>
						
					</ul>
				</li>
				
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>酒店管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="insert-hotel.jsp">
							<span>新增酒店</span></a></li>
					<li><a href="hotel-management.jsp">
							<span>维护酒店信息</span></a></li>
				</ul>
			</li>
			<li class="submenu">
				<a href="#"><i class="icon icon-th-list"></i> <span>客房管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="room-management.jsp">维护客房信息</a></li>
					<li><a href="insert-room.jsp">新增客房</a></li>
				</ul>
			</li>
			<li class="submenu active open"><a href="#"><i class="icon icon-th-list"></i>
					<span>评论管理</span> <span class="label">2</span></a>
				<ul>
					<li class="active"><a href="hotel-comment.jsp">
							<span>大众点评酒店</span></a></li>
					<li><a href="scenic-comment.jsp">
							<span>大众点评景点</span></a></li>
				</ul>
			</li>
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>订单管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="findAllHotelOrder.jsp">
							<span>酒店订单</span></a></li>
					<li><a href="findAllScenicOrder.jsp">
							<span>景点门票订单</span></a></li>
				</ul>
			</li>

		</ul>

	</div>
	<div id="content">
		<div id="content-header">
			<h1>评论管理</h1>
		</div>
		<div id="breadcrumb">
			<a href="#" class="tip-bottom"><i class="icon-home"></i>Home</a> 
			<a href="#" class="current">评论管理</a> 
			<a href="#" class="current">大众酒店点评</a>
		</div>
		<select style="width:90px" id="select-pageSize">
			<option value="10">10条/页</option>
			<option value="20">20条/页</option>
			<option value="30">30条/页</option>
		 </select>
		<div class="widget-content nopadding">
<!-- 			<select id="select-pageSize" size="1" -->
<!-- 				name="DataTables_Table_0_length" aria-controls="DataTables_Table_0" -->
<!-- 				style="display: none;"> -->
<!-- 				<option value="10" selected="selected">10条/页</option> -->
<!-- 				<option value="20">20条/页</option> -->
<!-- 				<option value="30">30条/页</option> -->
<!-- 			</select> -->
			<table class="table table-bordered ">
				<tr>
					<th style="font-size: 16px;">用户名字</th>
					<th style="font-size: 16px;">酒店名称</th>
					<th style="font-size: 16px;">评论内容</th>
					<th style="font-size: 16px;">评论时间</th>
					<th style="font-size: 16px;">评论操作</th>
				</tr>
				<tbody class="comment">
					<!--           <tr> -->
					<!--            <td>1</td> -->
					<!--            <td>1</td> -->
					<!--            <td>1</td> -->
					<!--            <td>1</td> -->
					<!--           </tr> -->
				</tbody>
			</table>
		</div>
		
		<div class="widget-title">
				
			<div class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers" id="DataTables_Table_0_paginate">
				<a tabindex="0" class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled" id="DataTables_Table_0_first">首页</a>
				<a tabindex="0" class="previous fg-button ui-button ui-state-default ui-state-disabled" id="DataTables_Table_0_previous">上一页</a>
				<span>
					<a tabindex="0" class="fg-button ui-button ui-state-default ui-state-disabled">1</a>
					<a tabindex="0" class="fg-button ui-button ui-state-default">2</a>
					<a tabindex="0" class="fg-button ui-button ui-state-default">3</a>
					<a tabindex="0" class="fg-button ui-button ui-state-default">4</a>
					<a tabindex="0" class="fg-button ui-button ui-state-default">5</a>
				</span>
				<a tabindex="0" class="next fg-button ui-button ui-state-default" id="DataTables_Table_0_next">下一页</a>
				<a tabindex="0" class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default" id="DataTables_Table_0_last">尾页</a>
			</div>
		</div>
		<div class="row-fluid">
			<div id="footer" class="span12">
				2020 &copy; Travel Admin.
			</div>
		</div>
	</div>
	<script src="${pageContext.request.contextPath}/back/js/jquery.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/back/js/jquery.ui.custom.js"></script>
	<script
		src="${pageContext.request.contextPath}/back/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/back/js/jquery.uniform.js"></script>
	<script src="${pageContext.request.contextPath}/back/js/select2.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/back/js/jquery.validate.js"></script>
	<script src="${pageContext.request.contextPath}/back/js/unicorn.js"></script>
<!-- 	<script -->
<%-- 		src="${pageContext.request.contextPath}/back/js/unicorn.form_validation.js"></script> --%>
</body>
<script src="${pageContext.request.contextPath}/back/js/jquery-3.5.1.js"></script> 
<script src="${pageContext.request.contextPath}/back/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	 // 页面一进入，发起异步请求,文章列表
	 sendAJAX(1);
	
	 // 首页
	 $(document).on("click","#DataTables_Table_0_first",function(){
		 
		 // 获取当前页码
		 var pageNum = $("#pageInfo").data("pagenum");	 
		 // 判断
		 if(pageNum == 1){
			 alert("已经是首页");		
		 }else{
			 // 调用发送请求方法,参数页码
			 sendAJAX(1);
		 }	
	 });
	 
	 // 上一页
	 $(document).on("click","#DataTables_Table_0_previous",function(){
		 // 获取当前页码
		 var pageNum = $("#pageInfo").data("pagenum") - 1;
		 
		 if(pageNum < 1){
			 // 拦截请求
			 alert("已经是第一页");
		 }else{
			// 调用发送请求方法,参数页码
			 sendAJAX(pageNum);
		 }
	})
	
	 // 下一页
	 $(document).on("click","#DataTables_Table_0_next",function(){
		 // 获取当前页码
		 var pageNum = eval($("#pageInfo").data("pagenum") + 1);		 
		 // 获取最大页码
		 var pages = $("#pageInfo").data("pages");
		 
		 if(pageNum > pages){
			 // 拦截请求
			 alert("已经是最后一页");
		 }else{
			// 调用发送请求方法,参数页码
			 sendAJAX(pageNum);
		 }
	})
	
	 // 尾页
	 $(document).on("click","#DataTables_Table_0_last",function(){
		 // 获取当前页码
		 var pageNum = $("#pageInfo").data("pagenum");	 
		 // 获取最大页码
		 var pages = $("#pageInfo").data("pages");
	 
		 if(pageNum == pages){
			 // 拦截请求
			 alert("已经是尾页");
		 }
		 // 调用发送请求方法,参数页码
		 sendAJAX(pages);
		
	  })
	  
	  // 页码
	 $(document).on("click",".currents",function(){
		 // 获取当前显示的页码
		 var currentPageNum = $("#pageInfo").data("pagenum");	
		 // 获取当前超链接上表示的页码
		 var pageNum = $(this).text();
		 if(currentPageNum == pageNum){
			 return;
		 }
		// 调用发送请求方法,参数页码
		 sendAJAX(pageNum);		
	  });
	 
	 // 下拉框改变事件
	 $(document).on("change","#select-pageSize",function(){
		// 调用发送请求方法,参数页码
		 sendAJAX(1);		
	  });
//删除事件
$(document).on("click",".delete",function(){	
 	 // 显示页面
 	  var pageNum = $("#pageInfo").data("pagenum");	
 	 // 获取显示记录数
 	 var pageSize = $("#select-pageSize").val();
	 // 自定义属性
	 var commentId = $(this).data("commentid");
	 // 发送AJAX请求
	 $.ajax({
		 async:true,
		 type:"get",
		 url:"${pageContext.request.contextPath}/HotelCommentServlet",
		 data:{
			 op:"delete",
			 pageNum:pageNum,
			 pageSize:pageSize,
			 commentId:commentId
		 },
		 dataType:"json",
		 success:function(result){
			 showData(result);
 			// 解决删除的当前页已经无数据的情况
 			if(result.pageNum > result.pages){
 				if(result.pages==0){
 					// 删除光,无数据
 					$(".comment").html("无相关数据");
 		 			$("#CommentPage").html("");
 					return;
 				}
 				// 切换到上一页,重新发送AJAX请求
 				sendAJAX(result.pages);
 			}else{
 				// 直接调用渲染数据方法
 				showData(result);
 			}
 		 },
		 error:function(){
			 alert("异步请求失败!");
		 }
	 });
});
});

 // 发送AJAX请求 
 function sendAJAX(pageNum){
 	 // 获取显示记录数
	 var pageSize = $("#select-pageSize").val();
 	 $.ajax({
 		 async:true,
 		 type:"get",
 		 url:"${pageContext.request.contextPath}/HotelCommentServlet",
 		 data:{
 			 op:"searchByPage",
 			 pageNum:pageNum,
 			 pageSize:pageSize,
 		 },
 		 dataType:"json",
 		 success:function(result){
 			// 调用渲染函数
 			 showData(result);
 		 },
 		 error:function(){
 			 alert("异步请求失败!");
 		 }
 	 });
 }	
	//渲染数据
	function showData(result){
		//渲染表格数据
		var content="";
		//没有数据
		if(result.length==0){
			$(".comment").html("无相关数据");
			$("#CommentPage").html("");
		}else{
			for(var i=0;i<result.data.length;i++){
				var comment=result.data[i];
				content += "<tr class=\"gradeA odd\">"+
						   "<td>"+comment.user.userName+"</td>"+
				           "<td>"+comment.hotel.hotelName+"</td>"+ 
				           "<td>"+comment.commentContent+"</td>"+ 
				           "<td>"+comment.commentDatetime+"</td>"+
				           "<td><a href=\"#\" class=\"delete\" data-commentid=\""+comment.commentId+"\">删除</a></td>"+
				           "</tr>";
		}
		$(".comment").html(content);
		//渲染分页信息
			 var pageInfo = "";
			 pageInfo = "<span id=\"pageInfo\" data-pagenum=\""+result.pageNum+"\"  data-pages=\""+result.pages+"\">每页"+result.pageSize+"条 共"+result.total+"条  第"+result.pageNum+"/"+result.pages+"页</span>";
			 if(result.pageNum == 1){
				 pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_first\" disabled=\"disabled\">首页</a>";
				 pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_previous\" disabled=\"disabled\" >上一页</a>";
			 	
			 }else{
				 pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_first\" >首页</a>";
				 pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_previous\"  >上一页</a>";
			 }

			 pageInfo += "<span>";
			 
			 for(var i = 1; i <= result.pages; i++){
				 // 设置当前的页面激活样式
				 if(result.pageNum == i){
					 pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default ui-state-disabled currents\"  >"+i+"</a>";
				 } else{
					 pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default currents\" >"+i+"</a>";
				 }
			 }
			 
			pageInfo += "</span>";
			 
	 		if(result.pageNum == result.pages){
	 			 pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_next\" disabled=\"disabled\">下一页</a>";
	 			 pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_last\" disabled=\"disabled\">尾页</a>";
			}else{
				 pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_next\">下一页</a>";
				 pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_last\">尾页</a>";
			}
		 $("#DataTables_Table_0_paginate").html(pageInfo);
 }	
}
</script>
</html>
